<template>
	<view>
		<!-- 搜索导航栏 -->
		<view class="Search-Navigation">
			<view class="Search-Navigation-box" @click="goBack">
				<!-- 返回图标 -->
				<icon class="return-icon" type="left"></icon>
				<!-- 搜索框 -->
				<view class="search-box">
					<icon class="search-icon"></icon>
					<u-input placeholder="搜索我的订单" border="surround" clearable="true" v-model="value"
						@change="change"></u-input>
				</view>
				<!-- 搜索按钮 -->
				<icon class="search-button" @click="addHistory"></icon>
			</view>
			<view class="Search-Navigation-background-fictitious"></view>
			<!-- 标签导航栏 -->
			<u-tabs class="custom-tabs" :list="list1" lineColor="#f72647" lineWidth="60rpx" lineHeight="5rpx"
				:activeStyle="{
                color:'#323232',
                fontWeight:'600',
              }" :inactiveStyle="{
                color:'#8b8b8b',
                fontSize:'30rpx'
              }" @click="click">
			</u-tabs>
		</view>

		<!-- 内容展示区，根据当前活动标签显示不同内容 -->
		<view v-for="tab in list1" :key="tab.name" ref="sections"
			:class="{ 'section': true, 'active-section': activeTab === tab.name }">
			<template v-if="activeTab === tab.name">
				<!-- 判断是否有内容，有内容则不显示推荐商品提示 -->
				<!-- <view v-if="tab.name !== '全部'"> -->
				<view class="Recommended-product-background">
					<i class="Order-icon"></i>
					<text class="Order-icon-txt">没有订单哦,去看看推荐商品</text>
				</view>
				<!-- </view> -->
				<!-- 其他内容展示 -->
				<view v-if="tab.name === '全部'"></view>
				<view v-if="tab.name === '全部'"></view>
				<view v-if="tab.name === '待付款'"></view>
				<view v-if="tab.name === '待收货/使用'"></view>
				<view v-if="tab.name === '评价'"></view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 标签列表
				list1: [{
						name: '全部'
					},
					{
						name: '待付款'
					},
					{
						name: '待发货'
					},
					{
						name: '待收货/使用'
					},
					{
						name: '评价'
					}
				],
				value: '', // 搜索框的输入值
				activeTab: '全部', // 默认激活的标签
			};
		},
		computed: {
			// 所有项目
			allItems() {
				return this.items;
			},
			// 待付款项目
			pendingItems() {
				return this.items.filter(item => item.status === '待付款');
			},
			// 待发货项目
			shippedItems() {
				return this.items.filter(item => item.status === '待发货');
			},
			// 判断当前标签页下是否有内容
			hasItems() {
				return (tabName) => {
					switch (tabName) {
						case '待付款':
							return this.pendingItems.length > 0;
						case '待发货':
							return this.shippedItems.length > 0;
							// 其他标签页的判断逻辑
						default:
							return false;
					}
				};
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 点击标签切换内容
			click(tab) {
				this.activeTab = tab.name;
			},
			// 搜索框内容变化处理
			change(event) {
				// 处理输入变化
			},
			// 添加历史记录
			addHistory() {
				// 处理添加历史记录
			},
			// 将待付款项目移动到待发货
			moveToShipped(itemId) {
				const item = this.items.find(item => item.id === itemId);
				if (item) {
					item.status = '待发货';
				}
			}
		}
	};
</script>


<style scoped>
	.Search-Navigation {
		width: 100%;
		height: 200rpx;
		border-bottom: 1rpx solid gainsboro;
	}

	.Search-Navigation-box {
		width: 100%;
		height: 100rpx;
		display: flex;
		position: fixed;
		top: 0rpx;
		background-color: white;
	}

	.Search-Navigation-background-fictitious {
		width: 100%;
		height: 100rpx;
	}

	.return-icon {
		display: block;
		width: 65rpx;
		height: 65rpx;
		margin: 17rpx 20rpx;
		background-image: url("../../static/icon/retuen.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.search-box {
		width: 550rpx;
		height: 70rpx;
		background-color: rgb(244, 244, 244);
		margin-top: 17rpx;
		border-radius: 30rpx;
		display: flex;
	}

	.search-button {
		width: 70rpx;
		height: 70rpx;
		margin-top: 15rpx;
		margin-left: 20rpx;
		background-image: url("../../static/icon/more.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.search-icon {
		display: block;
		width: 50rpx;
		height: 50rpx;
		margin-left: 10rpx;
		border-radius: 30rpx;
		background-image: url("../../static/icon/search.png");
		background-repeat: no-repeat;
		margin-top: 10rpx;
		background-size: cover;
	}

	.section {
		display: none;
	}

	/* 每个页面的边框样式 */
	.active-section {
		display: block;
		margin-top: 20px;
		padding: 20px;
		/* border: 1px solid #ccc; */
	}

	.Recommended-product-background {
		width: 450rpx;
		height: 450rpx;
		margin: auto;
	}

	.Order-icon {
		display: block;
		width: 260rpx;
		height: 260rpx;
		margin: 50rpx auto;
		background-image: url("../../static/icon/Order icon.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.Order-icon-txt {
		display: block;
		text-align: center;
		color: #ccc;
	}
</style>